<template>
  <view class="select-member">
    <view class="popup-title">
      选择会员
    </view>
    <view class="select-member-top">
      <view class="select-member-top-right flex ">
        <uni-easyinput primaryColor="#38C09E" class="input" v-model="searchVal" placeholder="姓名/手机号" suffixIcon="search"
          @iconClick="iconClick" @confirm="iconClick('suffix')" />
      </view>
      <button class="button xl" @click="toAdd">
        <text class="cuIcon-roundaddfill add-icon"></text>
        <text>新增会员</text>
      </button>
    </view>
    <view class="select-member-bottom">
      <view class="select-member-bottom-left member-list">
        <view class="text-gray full-height flex align-center justify-center" v-if="memberList.length===0">
          暂无会员
        </view>
        <view class="member-item"
          :class="{active:curMember===item.id,'bg-gray':['禁用','挂失'].includes(item.member_state)}"
          v-for="item in memberList" @click="onSelect(item)">
          <view class="left">
            <view class="top">
              <view class="phone">
                {{item.member_phone||'-'}}
              </view>
              <view class="phone">
                {{item.member_name||'-'}}
              </view>
            </view>
            <view class="bottom flex justify-between">
              <view class="phone">
                余额：￥{{item.balance||'0'}}
              </view>
              <view class="phone">
                积分：{{item.integral||'0'}}
              </view>
            </view>
          </view>
          <view class="right">
            <!--      <view class="badge" v-if="['禁用','挂失'].includes(item.member_state)">
              {{item.member_state}}
            </view> -->
            <button class="button sm" @click.stop="toPay(item)"
              v-if="!['禁用','挂失'].includes(item.member_state)">充值</button>
            <button class="button bg-white sm"
              :class="{'border-red':item.member_state=='禁用','border-orange':item.member_state=='挂失'}"
              v-else>{{item.member_state}}</button>
            <button class="button bg-white sm" @click.stop="toEdit(item.id,item)">编辑</button>
          </view>
        </view>
      </view>
      <view class="select-member-bottom-right">
        <u-number-keyboard :random="false" @change="changeNumber" @backspace="backspace" :mode="'number'"
          :dotDisabled="false">
        </u-number-keyboard>
        <button class="button lg full margin-top" @click="confirm">确定</button>
      </view>
    </view>

    <add-member :show="showAddPopup" :showRecharge.sync="showRecharge" @close="closeAddPopup" @success="successAdd"
      v-if="showAddPopup"></add-member>
    <add-member :show="showEditPopup" type="update" :memberNo="curMemberNo" @close="closeEditPopup"
      @success="successUpdate" v-if="showEditPopup"></add-member>
    <vip-recharge :show="showRecharge" @rechargeSuccess="rechargeSuccess" @showWindow="isShowWindow"
      :showWindow="showWindow" :codeInputValue="codeInputValue" :curSelectMember="onEditMember || curSelectMemberInfo"
      @close="closeRechargePopup" @success="rechargeSuccess" v-if="showRecharge"></vip-recharge>
  </view>
</template>

<script>
  import {
    queryMembers
  } from '@/common/api/member.js'
  export default {
    // 选择会员
    name: "select-member",
    data() {
      return {
        curMember: "",
        searchVal: "",
        showAddPopup: false,
        showEditPopup: false,
        newMember: null,
        showRecharge: false,
        codeInputValue: "",
        onEditMember: null,
        selectMembers: [],
      };
    },
    props: {
      showWindow: {
        type: Boolean
      },
      uuid: {
        type: String
      },
      codePayString: {
        type: [String, Boolean]
      }
    },
    watch: {
      uuid() {
        if (this.codePayString) {
          this.paying = true;
          this.codeInputValue = this.codePayString;
          // this.codeInputChange();
        }
      }
    },
    computed: {
      // 当前选择的会员
      curSelectMemberInfo() {
        return this.memberList.find(item => item.id == this.curMember)
      },
      curMemberNo() {
        return this.onEditMember?.menber_no || this.curSelectMemberInfo?.menber_no
      },
      memberList() {

        let res = this.$store.state?.$memberList || []
        // if (this.searchVal) {
        //   return res.filter(item => item.member_name.indexOf(this.searchVal) > -1 || item.member_phone.indexOf(
        //     this
        //     .searchVal) > -1)
        // }
        if (Array.isArray(this.selectMembers) && this.selectMembers.length > 0) {
          return res.filter(e => e.id && this.selectMembers.find(item => item.id == e.id))
        }
        return res
      }
    },
    created() {
      queryMembers()
    },
    methods: {
      iconClick(e) {
        this.selectMembers = []
        console.log(e);
        if (e === 'suffix') {
          let cond = {
            relation: "OR",
            data: [{
                colName: 'member_name',
                ruleType: 'like',
                value: this.searchVal
              },
              {
                colName: 'member_phone',
                ruleType: 'like',
                value: this.searchVal
              }
            ]
          }
          queryMembers(cond).then(res => {
            console.log(res);
            if (Array.isArray(res) && res.length > 0) {
              this.selectMembers = res
            }
          })
        }
      },
      isShowWindow(e) {
        console.log(e);
        this.$emit(`update:showWindow`, e)
        this.$emit(`update:codePayString`, '')
      },
      rechargeSuccess(e) {
        this.codeInputValue = ''
        this.$emit(`update:codePayString`, '')
        this.$emit(`update:showWindow`, false)
        this.showRecharge = false
        this.onEditMember = null
        if (!e || e === 'SUCCESS') {
          uni.showToast({
            title: '充值成功'
          })
        } else if (e === 'USERPAYING') {
          // uni.showLoading({
          //   title: '用户支付中...'
          // })
          // uni.showToast({
          //   title: '用户支付中,请稍后刷新查看会员余额变动',
          //   icon: 'none'
          // })
        }
        queryMembers()
      },
      successUpdate(e) {
        this.newMember = e;
        queryMembers()
        this.closeEditPopup()
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
      },
      successAdd(e, showRecharge) {
        if (e?.id) {
          this.curMember = e.id;
        }
        this.newMember = e;
        queryMembers()
        this.closeAddPopup()
        if (showRecharge) {
          // 会员充值弹窗
          this.showRecharge = true
        }
      },
      closeRechargePopup() {
        this.showRecharge = false
        this.onEditMember = null
        this.$emit(`update:showWindow`, false)
        this.$emit(`update:codePayString`, '')
      },
      // 关闭会员编辑弹窗
      closeEditPopup() {
        this.showEditPopup = false
        this.onEditMember = null
      },
      //关闭新增会员弹窗
      closeAddPopup(showRecharge = false) {
        this.showAddPopup = false
        console.log(showRecharge);
        if (showRecharge) {
          // 会员充值弹窗
          this.showRecharge = true
        }
      },
      // 打开新增会员弹窗
      toAdd() {
        this.showAddPopup = true
        return
        // 跳转到新增会员
        // const url = `/pages/public/form/form?serviceName=srvretail_member_info_add&type=add`
        // uni.navigateTo({
        //   url
        // })
      },
      // 编辑会员信息
      toEdit(id, e) {
        // if (e?.member_state == '挂失' || e?.member_state == '禁用') {
        //   uni.showToast({
        //     title: `当前会员已${e.member_state}`,
        //     icon: 'none'
        //   })
        //   return
        // }
        // this.curMember = id;
        this.onEditMember = e
        this.showEditPopup = true
        // const url = `/pages/public/form/form?serviceName=srvretail_member_info_update&type=update&id=${id}`
        // uni.navigateTo({
        //   url
        // })
      },
      // 充值
      toPay(e) {
        if (e?.member_state == '挂失' || e?.member_state == '禁用') {
          uni.showToast({
            title: `当前会员已${e.member_state}`,
            icon: 'none'
          })
          return
        }
        this.onEditMember = e
        this.showRecharge = true
        // this.$store.commit('SET_STATE', {
        //   key: '$curMember',
        //   value: e
        // })
        return
        const mainData = {
          member_no: e.menber_no
        }
        const fieldsCond = [{
          column: 'member_no',
          value: e.menber_no
        }]
        const url =
          `/pages/public/form/form?serviceName=srvretail_recharge_adjustment_consumption_add&type=add&fieldsCond=${JSON.stringify(fieldsCond)}&main_data=${JSON.stringify(mainData)}`
        uni.navigateTo({
          url
        })
      },
      backspace() {
        if (this.searchVal) {
          this.searchVal = this.searchVal.slice(0, this.searchVal.length - 1)
        }
      },
      changeNumber(e) {
        this.searchVal = `${this.searchVal}${e}`
      },
      onSelect(e) {
        if (e?.member_state == '挂失' || e?.member_state == '禁用') {
          uni.showToast({
            title: `当前会员已${e.member_state}`,
            icon: 'none'
          })
          return
        }
        if (e.id) {
          this.curMember = e.id
        }
      },
      confirm() {
        const curMemberInfo = this.memberList.find(item => item.id == this.curMember)
        if (curMemberInfo) {
          this.$store.commit('SET_STATE', {
            key: '$curMember',
            value: curMemberInfo
          })
          this.$emit('confirm')
        } else {
          uni.showToast({
            title: '请选择会员',
            icon: 'none'
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .select-member {
    width: 100rem;
    height: 70vh;
    padding: 1rem;
    font-size: 2.4rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .popup-title {
      padding: 1rem 2rem;
    }

    &-top {
      padding: 2rem;
      display: flex;
      justify-content: space-between;

      &-right {
        flex: 1;
        position: relative;

        // .search-icon{
        //   position: absolute;
        //   right: 4rem;
        // }
        .input {
          // border: 1px solid #38C09E;
          // border-radius: 1rem;
          // flex: 1;
          // height: 6rem;
          margin-right: 3rem;
          // padding: 0 2.4rem;
          font-size: 2.4rem;
        }

      }

      .button {
        min-width: 17rem;
        height: 6rem;
        line-height: 6rem;
        font-size: 2.4rem;
        display: flex;
        align-items: center;
        background-color: #DEF2EA;
        color: #333;

        .icon {
          display: flex;
          width: 2.7rem;
          height: 2.7rem;
          border-radius: 50%;
          background-color: #333;
          justify-content: center;
          align-items: center;
          margin-right: 1rem;
          color: #fff;
        }
      }
    }

    &-bottom {
      padding: 0 2rem;
      display: flex;
      padding-bottom: 0;
      flex: 1;

      &-left {
        flex: 1;
        margin-right: 1.6rem;
        overflow-y: scroll;
        height: 50vh;
        max-height: 50vh;

        .member-item {
          display: flex;
          width: 100%;
          height: 11rem;
          background-color: #F5F5F5;
          border-radius: 1rem;
          margin-bottom: 1rem;

          &.bg-gray {
            opacity: 0.7;
          }

          &.o-5 {
            // border: 1px solid;
            // background-color: rgba(0, 0, 0, 0.1);
            // opacity: 0.5;
            filter: grayscale(1);
            // background-color: rgba(255, 255, 255, 0.9);
          }

          &.full-height {
            height: 100%;
          }

          &.bg-white {
            background-color: #fff;
          }

          &.active {
            background-color: $retail-color-primary-light;
            border: 1px solid $retail-color-primary;
          }

          .left {
            padding: 1.6rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-right: 5rem;
            justify-content: space-around;

            .top {
              font-weight: 700;
              display: flex;
              justify-content: space-between;
            }

            .bottom {
              color: #808080;
              font-size: 2rem;
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 1rem;
            position: relative;

            .badge {
              // border: 1px solid #ff0000;
              border-radius: 4px;
              position: absolute;
              text-align: center;
              right: 0rem;
              top: 0rem;
              z-index: 999;
              background-color: #fff;
              // transform: rotate(10deg);
              padding: 1rem 2rem;
              // font-size: 1.2rem;
              width: 10rem;
              color: #000;
              // &::before{
              //   content: '';
              //   position: absolute;
              //   bottom: -4px;
              //   right: 20px;
              //   width: 4px;
              //   height: 8px;
              //   background-color: #fff;
              //   z-index: 99999;
              // }
              // &::after{
              //   content: '';
              //   position: absolute;
              //   top: -4px;
              //   left: 20px;
              //   width: 4px;
              //   height: 8px;
              //   background-color: #fff;
              //   z-index: 99999;
              // }
            }

            .button {
              width: 7rem;
              height: 4rem;

              &.bg-white {
                background-color: #fff;
                color: #333;
                border-radius: 4px;
              }

              &.border-red {
                border: 1px solid #e43d33;
                color: #e43d33;
                border-radius: 4px;
              }

              &.border-orange {
                border: 1px solid #f3a73f;
                color: #f3a73f;
              }
            }
          }
        }
      }

      &-right {
        width: 36rem;
        min-width: 20vw;
        height: 100%;
        display: flex;
        flex-direction: column;

        // justify-content: space-between;
        ::v-deep .u-keyboard {
          background-color: #fff;
          padding: 0;

          .u-keyboard__button-wrapper {
            box-shadow: none;
            margin: 0;
            margin-right: 1rem;
            margin-bottom: 1rem;
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid #E5E5E5;

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              margin-top: 0;
            }

            &:nth-child(10),
            &:nth-child(11),
            &:nth-child(12) {
              margin-bottom: 0;
            }

            &:nth-child(3n) {
              margin-right: 0;
            }

            &:nth-child(3n+1) {
              margin-left: 0;
            }
          }

          .u-keyboard__button-wrapper__button {
            background-color: #F5F5F5;
            width: 11rem;
            height: 9vh;

            &__text {
              font-size: 2.8rem;
            }
          }
        }
      }
    }

    &-handler {
      display: flex;
      justify-content: flex-end;
      padding: 1rem 2rem;

      .button {
        line-height: 7.4rem;
        height: 7.4rem;
        width: 36rem;
        font-size: 2.6rem;
      }
    }
  }
</style>
